<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="js/common.js"></script>
    <title>Document</title>
    <style>
        p>span {
            font-size: 12px;
        }
    </style>
</head>

<body>
    <p>
        <label for="">用户名</label>
        <input id="user" type="text" spellcheck="false">
        <span id="user_span"></span>
    </p>
    <p>
        <label for="">密&emsp;码</label>
        <input id="pwd" type="text">
        <span id="pwd_span"></span>
    </p>
    <p>
        <label for="">验证码</label>
        <input id="code" type="text">
        <span id="codeCreate">SFSF</span>
        <span id="code_span">×</span>

    </p>
    <p><button id="btn">注册</button></p>
</body>
<script>
    // [/u4e00-u9fa5]   0-127
    // 用户名不能为空  账号需要在6-12位之间  由数字，字母(大小写)，下划线,$ 组成,
    // 且不能以数字开头

    // 密码  需要在 6-12为之间  不能含有特殊字母
    //  密码强中弱        弱（11111||aaaaa||AAAAAA）   中（111aaa）   强（111AAAaaa!!!）

    // 验证码  随机数字，字母(大小写)  4位的



    var userInp = document.getElementById("user");
    var user_span = document.getElementById("user_span");
    var pwdInp = document.getElementById("pwd");
    var pwd_span = document.getElementById("pwd_span");

    var codeInp = document.getElementById("code");
    var code_span = document.getElementById("code_span");
    var codeCreate = document.getElementById("codeCreate");

    var btn = document.getElementById("btn");
    console.dir(code_span);

    // var userList = [{
    //     user: "a123123",
    //     pwd: "123123"
    // }]

    var userList = ["a123123", "b123123"];//假数据      假设此数组中用户名已经存在

    codeCreate.innerText = randCode();

    codeCreate.onclick = function () {
        codeCreate.innerText = randCode();
    }


    btn.onclick = function () {
        var user = userInp.value;
        var pwd = pwdInp.value;
        var code = codeInp.value;

        if (user) {

            if (user.length >= 6 && user.length <= 12) {  //用户名长度判断
                var firstChar = user.charAt(0);
                if (numList.indexOf(firstChar) == -1) { //用户名首字符判断

                    var flag = true;
                    for (var char of user) {  //遍历user   取到每一个字符 char
                        // console.log(char); 
                        if (allList.indexOf(char) == -1) {
                            flag = false;
                            break;
                        }

                    }

                    if (flag) {
                        if (userList.indexOf(user) == -1) {
                            userList.push(user);
                            user_span.innerText = "√";
                            user_span.style.color = "green";

                        } else {
                            user_span.innerText = "用户名已存在...";
                            user_span.style.color = "red";
                        }


                    } else {
                        user_span.innerText = "用户名含有非法字符...";
                        user_span.style.color = "red";
                    }


                } else {
                    user_span.innerText = "用户名不能以数字开头...";
                    user_span.style.color = "red";
                }


            } else {
                user_span.innerText = "用户名需要在6-12位之间...";
                user_span.style.color = "red";
            }




        } else {
            user_span.innerText = "请输入用户名...";
            user_span.style.color = "red";
        }

        if (pwd) {
            if (pwd.length >= 6 && pwd.length <= 12) {

                var flag = true;
                for (var char of pwd) {
                    if (allList.indexOf(char) == -1) {
                        flag = false;
                        break;
                    }
                }

                if (flag) {

                    var numFlag = false;
                    var smallFlag = false;
                    var bigFlag = false;
                    var speFlag = false;

                    for (var item of pwd) {
                        if (numList.indexOf(item) != -1) {
                            numFlag = true;
                        }
                        if (smallList.indexOf(item) != -1) {
                            smallFlag = true;
                        }
                        if (bigList.indexOf(item) != -1) {
                            bigFlag = true;
                        }
                        if (speList.indexOf(item) != -1) {
                            speFlag = true;
                        }
                    }

                    var sum = numFlag + smallFlag + bigFlag + speFlag;

                    if (sum == 1) {
                        pwd_span.innerText = "密码强度：弱";
                        pwd_span.style.color = "green";
                    } else if (sum == 2) {
                        pwd_span.innerText = "密码强度：中";
                        pwd_span.style.color = "green";
                    } else if (sum == 3) {
                        pwd_span.innerText = "密码强度：强";
                        pwd_span.style.color = "green";
                    } else if (sum == 4) {
                        pwd_span.innerText = "密码强度：超强";
                        pwd_span.style.color = "green";
                    }




                } else {
                    pwd_span.innerText = "密码中含有非法字符...";
                    pwd_span.style.color = "red";
                }


            } else {
                pwd_span.innerText = "密码长度需要在6-12位之间...";
                pwd_span.style.color = "red";
            }



        } else {
            pwd_span.innerText = "请输入密码...";
            pwd_span.style.color = "red";
        }

        if (code) {

            if (code == codeCreate.innerText) {
                code_span.innerText = "√";
                code_span.style.color = "green";
            } else {
                code_span.innerText = "×";
                code_span.style.color = "red";
            }

        } else {
            code_span.innerText = "请输入验证码...";
            code_span.style.color = "red";
        }


    }



</script>

</html>